import React, { useState } from "react"

import { indexCopy } from "../../copy/en/index2"
import { createInternational } from "../../lib/createInternational"
import { useIntl } from "react-intl"

const ReverseRow = (props: { children: any }) => <div className="row reverse">{props.children}</div>

const Slack = () => (
  <ReverseRow>
    <div className="slack small_full_width">
      <div className='illustration'>
        <div className="fg">
          <p><strong>First</strong>, we were surprised by the number of small bugs we found when converting our code.</p>
          <p><strong>Second</strong>, we underestimated how powerful the editor integration is.</p>
          <p>TypeScript was such a boon to our stability and sanity that we started using it for all new code within days of starting the conversion.</p>
        </div>
        <div className="bg">
          <svg aria-label="slack testimonial" name="slack testimonial" width="780" height="380" viewBox="0 0 780 380" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path opacity="0.6" d="M0.5 11C0.5 5.201 5.20101 0.5 11 0.5H769C774.799 0.5 779.5 5.20101 779.5 11V379.5H0.5V11Z" stroke="black" />
            <rect opacity="0.6" x="21.5" y="33.5" width="39" height="39" rx="10.5" stroke="black" />
            <rect opacity="0.6" x="21.5" y="92.5" width="39" height="39" rx="10.5" stroke="black" />
            <rect opacity="0.6" x="21.5" y="153.5" width="39" height="39" rx="10.5" stroke="black" />
            <path opacity="0.6" d="M77.4997 1L77.5 379.5" stroke="black" />
            <path opacity="0.6" d="M229.499 1L229.5 379.5" stroke="black" />
            <path d="M306.355 14.9277L301.478 34.5273H295.018L301.214 14.9277H306.355ZM292.996 14.9277L288.25 34.5273H281.658L287.811 14.9277H292.996Z" fill="black" />
            <path d="M733.355 347.928L728.478 367.527H722.018L728.214 347.928H733.355ZM719.996 347.928L715.25 367.527H708.658L714.811 347.928H719.996Z" fill="black" />
          </svg>
        </div>
      </div>

      <div className="copy">
        <svg aria-label="slack logo" name="slack logo" width="220" height="56" viewBox="0 0 220 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M70.5269 44.1002L73.2567 37.7606C76.2068 39.9619 80.1254 41.1065 84.0001 41.1065C86.8621 41.1065 88.6673 40.0059 88.6673 38.3329C88.6233 33.6663 71.5396 37.3204 71.4075 25.6097C71.3634 19.6663 76.6471 15.0876 84.1322 15.0876C88.5792 15.0876 93.0263 16.1883 96.1965 18.6977L93.6427 25.1694C90.7367 23.3204 87.1262 21.9996 83.6919 21.9996C81.3583 21.9996 79.8172 23.1002 79.8172 24.509C79.8613 29.0877 97.0771 26.5782 97.2532 37.7606C97.2532 43.8361 92.1017 48.1065 84.7046 48.1065C79.2889 48.1065 74.3135 46.8298 70.5269 44.1002Z" fill="black" />
          <path d="M175.275 35.4713C173.91 37.8487 171.356 39.4776 168.406 39.4776C164.047 39.4776 160.525 35.9556 160.525 31.5971C160.525 27.2386 164.047 23.7166 168.406 23.7166C171.356 23.7166 173.91 25.3455 175.275 27.7229L182.804 23.5405C179.986 18.5216 174.57 15.0876 168.406 15.0876C159.292 15.0876 151.895 22.4839 151.895 31.5971C151.895 40.7103 159.292 48.1065 168.406 48.1065C174.614 48.1065 179.986 44.7166 182.804 39.6537L175.275 35.4713Z" fill="black" />
          <path d="M110.462 1.396H101.04V47.4903H110.462V1.396Z" fill="black" />
          <path d="M186.502 1.396V47.4903H195.925V33.6664L207.109 47.4903H219.173L204.951 31.0689L218.116 15.7482H206.58L195.925 28.4715V1.396H186.502Z" fill="black" />
          <path d="M138.465 35.5594C137.101 37.8046 134.283 39.4776 131.112 39.4776C126.753 39.4776 123.231 35.9556 123.231 31.5971C123.231 27.2386 126.753 23.7166 131.112 23.7166C134.283 23.7166 137.101 25.4776 138.465 27.7669V35.5594ZM138.465 15.748V19.4902C136.924 16.8927 133.094 15.0876 129.087 15.0876C120.809 15.0876 114.293 22.3958 114.293 31.5531C114.293 40.7103 120.809 48.1065 129.087 48.1065C133.094 48.1065 136.924 46.3015 138.465 43.704V47.4461H147.888V15.748H138.465Z" fill="black" />
          <path d="M12.275 35.5157C12.275 38.7295 9.67719 41.327 6.46299 41.327C3.24878 41.327 0.651001 38.7295 0.651001 35.5157C0.651001 32.3018 3.24878 29.7043 6.46299 29.7043H12.275V35.5157Z" fill="black" />
          <path d="M15.181 35.5157C15.181 32.3018 17.7788 29.7043 20.993 29.7043C24.2072 29.7043 26.805 32.3018 26.805 35.5157V50.044C26.805 53.2578 24.2072 55.8553 20.993 55.8553C17.7788 55.8553 15.181 53.2578 15.181 50.044V35.5157Z" fill="black" />
          <path d="M20.9929 12.1822C17.7787 12.1822 15.1809 9.58473 15.1809 6.37089C15.1809 3.15706 17.7787 0.55957 20.9929 0.55957C24.2071 0.55957 26.8049 3.15706 26.8049 6.37089V12.1822H20.9929Z" fill="black" />
          <path d="M20.9929 15.1318C24.2071 15.1318 26.8049 17.7293 26.8049 20.9432C26.8049 24.157 24.2071 26.7545 20.9929 26.7545H6.41892C3.20472 26.7545 0.606934 24.157 0.606934 20.9432C0.606934 17.7293 3.20472 15.1318 6.41892 15.1318H20.9929Z" fill="black" />
          <path d="M44.2849 20.9432C44.2849 17.7293 46.8827 15.1318 50.0969 15.1318C53.3111 15.1318 55.9089 17.7293 55.9089 20.9432C55.9089 24.157 53.3111 26.7545 50.0969 26.7545H44.2849V20.9432Z" fill="black" />
          <path d="M41.379 20.9432C41.379 24.1571 38.7812 26.7545 35.567 26.7545C32.3528 26.7545 29.755 24.1571 29.755 20.9432V6.37089C29.755 3.15706 32.3528 0.55957 35.567 0.55957C38.7812 0.55957 41.379 3.15706 41.379 6.37089V20.9432Z" fill="black" />
          <path d="M35.567 44.2327C38.7812 44.2327 41.379 46.8301 41.379 50.044C41.379 53.2578 38.7812 55.8553 35.567 55.8553C32.3528 55.8553 29.755 53.2578 29.755 50.044V44.2327H35.567Z" fill="black" />
          <path d="M35.567 41.327C32.3528 41.327 29.755 38.7295 29.755 35.5157C29.755 32.3018 32.3528 29.7043 35.567 29.7043H50.141C53.3552 29.7043 55.953 32.3018 55.953 35.5157C55.953 38.7295 53.3552 41.327 50.141 41.327H35.567Z" fill="black" />
        </svg>

        <p>Felix Rieseberg at Slack covered the transition of their desktop app from JavaScript to TypeScript in their blog</p>

        <a className='migration-button' href="https://slack.engineering/typescript-at-slack-a81307fa288d" target="_blank">Read</a>
      </div>
    </div>
  </ReverseRow >
)

const AirBnB = () => (
  <ReverseRow>
    <div className="airbnb small_full_width">
      <div className='illustration airbnb'>
        <div className="fg">
          <p><strong>38% [...] bugs preventable with TypeScript</strong> according to postmortem analysis</p>
          <p>With TypeScript, engineers can move <strong>faster more safely</strong>.</p>
          <p>End-to-end type safety because the types used by the back-end and the front-end share a source of truth.</p>
        </div>
        <div className="bg">
          <svg aria-label="airbnb testimonial" name="airbnb testimonial" width="780" height="380" viewBox="0 0 780 380" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="44.5" y="79.5" width="93" height="20" stroke="black" strokeOpacity="0.6" />
            <rect x="44.5" y="139.5" width="171" height="20" stroke="black" strokeOpacity="0.6" />
            <rect x="44.5" y="179.5" width="171" height="20" stroke="black" strokeOpacity="0.6" />
            <rect x="44.5" y="218.5" width="171" height="20" stroke="black" strokeOpacity="0.6" />
            <rect x="112.5" y="271.5" width="103" height="32" stroke="black" strokeOpacity="0.6" />
            <path opacity="0.6" d="M0.5 11C0.5 5.201 5.20101 0.5 11 0.5H769C774.799 0.5 779.5 5.20101 779.5 11V379.5H0.5V11Z" stroke="black" />
            <rect opacity="0.6" x="28.5" y="62.5" width="203" height="254" rx="10.5" stroke="black" />
            <path opacity="0.6" d="M0 33H780" stroke="black" />
            <path d="M306.355 70.9277L301.478 90.5273H295.018L301.214 70.9277H306.355ZM292.996 70.9277L288.25 90.5273H281.658L287.811 70.9277H292.996Z" fill="black" />
            <path d="M733.355 347.928L728.478 367.527H722.018L728.214 347.928H733.355ZM719.996 347.928L715.25 367.527H708.658L714.811 347.928H719.996Z" fill="black" />
            <line x1="127.5" y1="179" x2="127.5" y2="200" stroke="#A46464" />
          </svg>
        </div>
      </div>

      <div className="copy">
        <svg aria-label="airbnb logo" name="airbnb logo" width="221" height="69" viewBox="0 0 221 69" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clipPath="url(#clip0)">
            <path d="M116.472 17.3363C116.472 19.8228 114.469 21.8258 111.984 21.8258C109.499 21.8258 107.496 19.8228 107.496 17.3363C107.496 14.8499 109.43 12.8468 111.984 12.8468C114.539 12.9159 116.472 14.9189 116.472 17.3363ZM97.9687 26.3844C97.9687 26.7988 97.9687 27.4895 97.9687 27.4895C97.9687 27.4895 95.8284 24.7267 91.2717 24.7267C83.7463 24.7267 77.8778 30.4595 77.8778 38.4024C77.8778 46.2763 83.6772 52.0781 91.2717 52.0781C95.8975 52.0781 97.9687 49.2462 97.9687 49.2462V50.4204C97.9687 50.973 98.383 51.3874 98.9353 51.3874H104.528V25.4174C104.528 25.4174 99.4186 25.4174 98.9353 25.4174C98.383 25.4174 97.9687 25.9009 97.9687 26.3844ZM97.9687 43.03C96.9331 44.5495 94.8619 45.8619 92.3764 45.8619C87.9578 45.8619 84.5748 43.0991 84.5748 38.4024C84.5748 33.7057 87.9578 30.9429 92.3764 30.9429C94.7928 30.9429 97.0021 32.3243 97.9687 33.7748V43.03ZM108.67 25.4174H115.298V51.3874H108.67V25.4174ZM207.675 24.7267C203.118 24.7267 200.978 27.4895 200.978 27.4895V12.9159H194.35V51.3874C194.35 51.3874 199.459 51.3874 199.942 51.3874C200.494 51.3874 200.909 50.9039 200.909 50.4204V49.2462C200.909 49.2462 203.049 52.0781 207.606 52.0781C215.131 52.0781 221 46.2763 221 38.4024C221 30.5285 215.131 24.7267 207.675 24.7267ZM206.57 45.7928C204.016 45.7928 202.013 44.4805 200.978 42.961V33.7057C202.013 32.3243 204.223 30.8739 206.57 30.8739C210.989 30.8739 214.372 33.6366 214.372 38.3333C214.372 43.03 210.989 45.7928 206.57 45.7928ZM190.898 35.985V51.4565H184.27V36.7447C184.27 32.4625 182.889 30.7357 179.161 30.7357C177.159 30.7357 175.087 31.7718 173.776 33.2913V51.3874H167.148V25.4174H172.395C172.947 25.4174 173.361 25.9009 173.361 26.3844V27.4895C175.295 25.4865 177.849 24.7267 180.404 24.7267C183.303 24.7267 185.72 25.5556 187.653 27.2132C190 29.1471 190.898 31.6336 190.898 35.985ZM151.061 24.7267C146.504 24.7267 144.364 27.4895 144.364 27.4895V12.9159H137.736V51.3874C137.736 51.3874 142.845 51.3874 143.329 51.3874C143.881 51.3874 144.295 50.9039 144.295 50.4204V49.2462C144.295 49.2462 146.435 52.0781 150.992 52.0781C158.518 52.0781 164.386 46.2763 164.386 38.4024C164.455 30.5285 158.587 24.7267 151.061 24.7267ZM149.957 45.7928C147.402 45.7928 145.4 44.4805 144.364 42.961V33.7057C145.4 32.3243 147.609 30.8739 149.957 30.8739C154.375 30.8739 157.758 33.6366 157.758 38.3333C157.758 43.03 154.375 45.7928 149.957 45.7928ZM132.006 24.7267C134.008 24.7267 135.044 25.0721 135.044 25.0721V31.2192C135.044 31.2192 129.52 29.3544 126.068 33.2913V51.4565H119.44V25.4174C119.44 25.4174 124.549 25.4174 125.033 25.4174C125.585 25.4174 125.999 25.9009 125.999 26.3844V27.4895C127.242 26.039 129.935 24.7267 132.006 24.7267ZM63.1721 49.039C62.8269 48.2102 62.4817 47.3123 62.1365 46.5526C61.5842 45.3093 61.0318 44.1351 60.5485 43.03L60.4795 42.961C55.7157 32.6006 50.6066 22.1021 45.2215 11.7417L45.0143 11.3273C44.462 10.2913 43.9097 9.18619 43.3574 8.08108C42.6669 6.83784 41.9765 5.52553 40.8719 4.28228C38.6626 1.51952 35.4867 0 32.1037 0C28.6516 0 25.5448 1.51952 23.2664 4.14414C22.2308 5.38739 21.4714 6.6997 20.781 7.94294C20.2286 9.04805 19.6763 10.1532 19.124 11.1892L18.9169 11.6036C13.6007 21.964 8.42264 32.4625 3.65882 42.8228L3.58978 42.961C3.10649 44.0661 2.55416 45.2402 2.00184 46.4835C1.65663 47.2432 1.31143 48.0721 0.966223 48.97C0.0686908 51.5255 -0.207473 53.9429 0.137732 56.4294C0.897182 61.6096 4.34923 65.961 9.11305 67.8949C10.9081 68.6547 12.7722 69 14.7054 69C15.2577 69 15.9481 68.9309 16.5004 68.8619C18.7788 68.5856 21.1262 67.8258 23.4045 66.5135C26.2352 64.9249 28.9278 62.6456 31.9656 59.3303C35.0034 62.6456 37.765 64.9249 40.5267 66.5135C42.805 67.8258 45.1524 68.5856 47.4308 68.8619C47.9831 68.9309 48.6735 69 49.2258 69C51.159 69 53.0921 68.6547 54.8181 67.8949C59.651 65.961 63.034 61.5405 63.7935 56.4294C64.3458 54.012 64.0696 51.5946 63.1721 49.039ZM32.0346 52.6306C28.3064 47.9339 25.89 43.5135 25.0615 39.7838C24.7163 38.1952 24.6473 36.8138 24.8544 35.5706C24.9925 34.4655 25.4067 33.4985 25.959 32.6697C27.2708 30.8048 29.4801 29.6306 32.0346 29.6306C34.5892 29.6306 36.8675 30.7357 38.1102 32.6697C38.6626 33.4985 39.0768 34.4655 39.2149 35.5706C39.422 36.8138 39.353 38.2643 39.0078 39.7838C38.1793 43.4444 35.7629 47.8649 32.0346 52.6306ZM59.582 55.8769C59.0987 59.4685 56.6822 62.5766 53.2992 63.958C51.6423 64.6486 49.8472 64.8559 48.0521 64.6486C46.3261 64.4414 44.6001 63.8889 42.805 62.8529C40.3196 61.4715 37.8341 59.3303 34.9344 56.1532C39.4911 50.5586 42.2527 45.4474 43.2883 40.8889C43.7716 38.7477 43.8406 36.8138 43.6335 35.018C43.3574 33.2913 42.736 31.7027 41.7694 30.3213C39.6291 27.2132 36.039 25.4174 32.0346 25.4174C28.0303 25.4174 24.4401 27.2823 22.2999 30.3213C21.3333 31.7027 20.7119 33.2913 20.4358 35.018C20.1596 36.8138 20.2286 38.8168 20.781 40.8889C21.8166 45.4474 24.6473 50.6276 29.1349 56.2222C26.3042 59.3994 23.7497 61.5405 21.2643 62.9219C19.4692 63.958 17.7432 64.5105 16.0171 64.7177C14.153 64.9249 12.358 64.6486 10.77 64.027C7.38703 62.6456 4.9706 59.5375 4.48731 55.9459C4.28019 54.2192 4.41827 52.4925 5.10868 50.5586C5.3158 49.8679 5.66101 49.1772 6.00621 48.3483C6.4895 47.2432 7.04182 46.0691 7.59415 44.8949L7.66319 44.7568C12.427 34.4655 17.536 23.967 22.8522 13.7447L23.0593 13.3303C23.6116 12.2943 24.164 11.1892 24.7163 10.1532C25.2686 9.04805 25.89 8.01201 26.6494 7.11411C28.0993 5.45646 30.0325 4.55856 32.1727 4.55856C34.313 4.55856 36.2461 5.45646 37.696 7.11411C38.4554 8.01201 39.0768 9.04805 39.6291 10.1532C40.1815 11.1892 40.7338 12.2943 41.2861 13.3303L41.4932 13.7447C46.7404 24.036 51.8494 34.5345 56.6132 44.8258V44.8949C57.1655 46 57.6488 47.2432 58.2011 48.3483C58.5464 49.1772 58.8916 49.8679 59.0987 50.5586C59.651 52.3544 59.8581 54.0811 59.582 55.8769Z" fill="black" />
          </g>
          <defs>
            <clipPath id="clip0">
              <rect width="221" height="69" fill="black" />
            </clipPath>
          </defs>
        </svg>

        <p>Brie Bunge at Airbnb gave a talk at JSConf Hawaiʻi on how Airbnb adopted TypeScript at Scale</p>

        <a className='migration-button' href="https://www.youtube.com/watch?v=P-J9Eg7hJwE" target="_blank">Watch</a>
      </div>
    </div>

  </ReverseRow>
)


const Google = () => (
  <ReverseRow>
    <div className="goog small_full_width">
      <div className='illustration '>
        <div className="fg">
          <p>Using TypeScript is <strong>simple and pleasant</strong> for all Google engineers.</p>
          <p>Around eight or nine languages are officially supported and TypeScript is one of them.</p>
        </div>
        <div className="bg">
          <svg aria-label="google testimonial" name="google testimonial" width="780" height="380" viewBox="0 0 780 380" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="414.5" y="244.5" width="79" height="20" stroke="black" strokeOpacity="0.3" />
            <rect x="284.5" y="244.5" width="79" height="20" stroke="black" strokeOpacity="0.3" />
            <path opacity="0.6" d="M0.5 11C0.5 5.201 5.20101 0.5 11 0.5H769C774.799 0.5 779.5 5.20101 779.5 11V379.5H0.5V11Z" stroke="black" />
            <rect opacity="0.6" x="214.5" y="181.5" width="351" height="45" rx="22.5" stroke="black" strokeOpacity="0.3" />
            <path opacity="0.6" d="M0 33H780" stroke="black" />
            <path d="M317.355 65.9277L312.478 85.5273H306.018L312.214 65.9277H317.355ZM303.996 65.9277L299.25 85.5273H292.658L298.811 65.9277H303.996Z" fill="black" />
            <path d="M733.355 327.928L728.478 347.527H722.018L728.214 327.928H733.355ZM719.996 327.928L715.25 347.527H708.658L714.811 327.928H719.996Z" fill="black" />
          </svg>
        </div>
      </div>

      <div className="copy">
        <svg aria-label="google logo" name="google logo" width="175" height="59" viewBox="0 0 175 59" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M74.4716 30.2568C74.4716 38.4463 68.0442 44.481 60.1563 44.481C52.2685 44.481 45.8411 38.4463 45.8411 30.2568C45.8411 22.0097 52.2685 16.0327 60.1563 16.0327C68.0442 16.0327 74.4716 22.0097 74.4716 30.2568ZM68.205 30.2568C68.205 25.1392 64.4798 21.6377 60.1563 21.6377C55.8328 21.6377 52.1076 25.1392 52.1076 30.2568C52.1076 35.3232 55.8328 38.876 60.1563 38.876C64.4798 38.876 68.205 35.3167 68.205 30.2568Z" fill="black" />
          <path d="M105.354 30.2568C105.354 38.4463 98.9265 44.481 91.0386 44.481C83.1508 44.481 76.7234 38.4463 76.7234 30.2568C76.7234 22.0161 83.1508 16.0327 91.0386 16.0327C98.9265 16.0327 105.354 22.0097 105.354 30.2568ZM99.0874 30.2568C99.0874 25.1392 95.3622 21.6377 91.0386 21.6377C86.7151 21.6377 82.9899 25.1392 82.9899 30.2568C82.9899 35.3232 86.7151 38.876 91.0386 38.876C95.3622 38.876 99.0874 35.3167 99.0874 30.2568Z" fill="black" />
          <path d="M134.949 16.8921V42.4288C134.949 52.9334 128.734 57.2237 121.387 57.2237C114.471 57.2237 110.308 52.6127 108.738 48.8418L114.194 46.578C115.165 48.8931 117.546 51.6251 121.38 51.6251C126.084 51.6251 128.998 48.7328 128.998 43.2882V41.2424H128.779C127.377 42.9675 124.675 44.4746 121.265 44.4746C114.13 44.4746 107.593 38.2796 107.593 30.3081C107.593 22.279 114.13 16.0327 121.265 16.0327C124.668 16.0327 127.37 17.5398 128.779 19.2136H128.998V16.8985H134.949V16.8921ZM129.442 30.3081C129.442 25.2996 126.09 21.6377 121.824 21.6377C117.501 21.6377 113.879 25.2996 113.879 30.3081C113.879 35.2654 117.501 38.876 121.824 38.876C126.09 38.876 129.442 35.2654 129.442 30.3081Z" fill="black" />
          <path d="M144.761 1.92383V43.6086H138.649V1.92383H144.761Z" fill="black" />
          <path d="M168.579 34.9382L173.443 38.1704C171.873 40.4855 168.09 44.4744 161.553 44.4744C153.447 44.4744 147.392 38.2281 147.392 30.2503C147.392 21.7914 153.498 16.0261 160.852 16.0261C168.257 16.0261 171.879 21.9005 173.063 25.0749L173.713 26.691L154.637 34.5662C156.097 37.42 158.368 38.8758 161.553 38.8758C164.744 38.8758 166.958 37.311 168.579 34.9382ZM153.607 29.8206L166.359 24.5426C165.658 22.7662 163.548 21.5285 161.064 21.5285C157.879 21.5285 153.447 24.331 153.607 29.8206V29.8206Z" fill="black" />
          <path d="M22.705 26.5565V20.5218H43.1067C43.3061 21.5736 43.4091 22.8177 43.4091 24.1645C43.4091 28.6921 42.1674 34.2906 38.1655 38.2796C34.273 42.3198 29.2997 44.4746 22.7115 44.4746C10.5001 44.4746 0.231689 34.56 0.231689 22.388C0.231689 10.2161 10.5001 0.301514 22.7115 0.301514C29.467 0.301514 34.2795 2.94369 37.8953 6.38749L33.6232 10.6458C31.0304 8.22162 27.5175 6.33619 22.705 6.33619C13.7878 6.33619 6.81349 13.4996 6.81349 22.388C6.81349 31.2765 13.7878 38.4399 22.705 38.4399C28.489 38.4399 31.7832 36.1248 33.8935 34.0213C35.6049 32.3154 36.7308 29.8785 37.1747 26.5501L22.705 26.5565V26.5565Z" fill="black" />
        </svg>

        <p>Rodoslav Kirov and Bowen Ni covered how TypeScript became one of the five languages available at Google at TSConf 2018.</p>

        <a className='migration-button' href="https://www.youtube.com/watch?v=sjov1k5jexA" target="_blank">Watch</a>
      </div>
    </div>

  </ReverseRow>
)



export const OSS = () => (
  <ReverseRow>
    <div className="oss">
      <div className="icons">
        <a href='https://angular.io/' target="_blank">
          <svg aria-label="angular logo" name="angular logo" width="110" height="118" viewBox="0 0 110 118" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M55 72.5856H40.5752L33.7424 89.6384H21.0696H21.0112L55 13.4264V13.4848V0.52002L0.629639 19.9088L8.92244 91.7992L55 117.32V72.5856Z" fill="white" />
            <path d="M45.072 62.0736H55V38.188L45.072 62.0736Z" fill="white" />
            <path d="M55 72.5856H69.4248L76.2576 89.6384H88.9304H88.9888L55 13.4264V13.4848V0.52002L109.37 19.9088L101.078 91.7992L55 117.32V72.5856Z" fill="#43914B" />
            <path opacity="0.9" d="M64.928 62.0736H55V38.188L64.928 62.0736Z" fill="white" />
          </svg>
          <p>Angular</p>
        </a>

        <a href='https://vuejs.org/' target="_blank">
          <svg aria-label="vue logo" name="vue logo" width="127" height="110" viewBox="0 0 127 110" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M101.287 0H126.609L63.3043 109.2L0 0H25.0052H48.4278L63.3043 25.3217L77.8643 0H101.287Z" fill="white" fillOpacity="0.24" />
            <path d="M0 0L63.3043 109.2L126.609 0H101.287L63.3043 65.52L25.0052 0H0Z" fill="white" />
          </svg>
          <p>Vue</p>
        </a>

        <a href='https://jestjs.io/' target="_blank">
          <svg aria-label="jest logo" name="jest logo" width="111" height="122" viewBox="0 0 111 122" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clipPath="url(#clip0)">
              <path d="M104.051 60.01C104.051 53.7458 98.9423 48.6677 92.6404 48.6677C92.235 48.6677 91.8352 48.6892 91.4411 48.7302L107.113 2.78308H40.5116L56.1617 48.6905C55.9308 48.676 55.6994 48.6683 55.468 48.6677C49.1666 48.6677 44.058 53.7458 44.058 60.01C44.058 65.0734 47.3962 69.3602 52.004 70.8187C49.5702 75.0089 46.5082 78.7827 43.0316 82.0429C38.3042 86.4762 32.8938 89.8376 27.0424 91.909C20.0755 88.3515 16.7853 80.4391 19.7537 73.5021C20.0893 72.719 20.4314 71.9246 20.7588 71.1342C25.8058 69.9631 29.5668 65.4652 29.5668 60.0914C29.5668 53.8272 24.4582 48.7491 18.1564 48.7491C11.8541 48.7491 6.74548 53.8272 6.74548 60.0914C6.74548 63.933 8.66847 67.3254 11.6074 69.3774C8.78294 75.7696 4.63171 82.4588 3.3383 90.2117C1.7882 99.5037 3.33353 109.367 11.4179 114.937C30.2463 127.908 50.6841 106.895 72.2333 101.613C80.0423 99.6985 88.6154 100.007 95.4956 96.0457C100.663 93.0709 104.07 88.1411 105.036 82.6062C105.991 77.1385 104.598 71.6945 101.397 67.2801C103.115 65.2426 104.055 62.6682 104.051 60.01ZM66.878 60.0501L66.8793 60.01C66.8793 55.8965 64.6758 52.2942 61.3787 50.3059L73.835 25.2685L86.313 50.5714C83.2488 52.6049 81.2295 56.0728 81.2295 60.01C81.2295 60.0927 81.2339 60.1742 81.236 60.2565L66.878 60.0501Z" fill="#43914B" />
              <path d="M106.837 60.0093C106.837 53.1197 101.843 47.3709 95.2653 46.143L111 0.0123291H36.6239L52.3825 46.2365C46.0334 47.6412 41.2708 53.2813 41.2708 60.0093C41.2708 65.0619 43.9569 69.4999 47.9828 71.9937C46.0464 74.8612 43.7501 77.5597 41.1186 80.0272C36.9457 83.9407 32.2962 86.9086 27.2839 88.861C22.2356 85.7087 20.1014 79.7643 22.3179 74.5853L22.4914 74.1802L22.817 73.4182C28.3618 71.4963 32.353 66.2497 32.353 60.0907C32.353 52.309 25.984 45.9784 18.1554 45.9784C10.3269 45.9784 3.95829 52.309 3.95829 60.0907C3.95829 64.0184 5.5821 67.5751 8.1958 70.1361C7.70846 71.1631 7.21371 72.1866 6.71161 73.2066C4.32164 78.086 1.61298 83.6166 0.588402 89.758C-1.44645 101.955 1.83542 111.705 9.82958 117.212C14.6806 120.554 19.6067 121.869 24.564 121.869C33.8988 121.868 43.3412 117.207 52.5767 112.647C59.2285 109.363 66.1061 105.967 72.9001 104.302C75.428 103.682 78.0291 103.309 80.7828 102.914C86.2435 102.131 91.8907 101.322 96.8926 98.4422C102.69 95.1041 106.659 89.5045 107.781 83.0796C108.745 77.564 107.585 72.0403 104.757 67.3553C106.12 65.1447 106.84 62.6019 106.837 60.0093V60.0093ZM101.264 60.0093C101.264 64.7361 97.3951 68.5819 92.6395 68.5819C87.8847 68.5819 84.0157 64.7361 84.0157 60.0093C84.0157 55.2824 87.8847 51.437 92.6395 51.437C97.3951 51.437 101.264 55.2824 101.264 60.0093V60.0093ZM103.225 5.55244L89.3307 46.2878C88.7329 46.43 88.1451 46.6112 87.5712 46.83L73.8453 18.9967L60.0796 46.6654C59.4799 46.4591 58.8669 46.2935 58.2447 46.1697L44.3978 5.55244H103.225V5.55244ZM55.4679 51.437C60.2231 51.437 64.0917 55.2824 64.0917 60.0093C64.0917 64.7361 60.2231 68.5819 55.4679 68.5819C50.7131 68.5819 46.8442 64.7361 46.8442 60.0093C46.8442 55.2824 50.7131 51.437 55.4679 51.437V51.437ZM18.1554 51.5185C22.9111 51.5185 26.7796 55.3639 26.7796 60.0907C26.7796 64.8175 22.9111 68.6634 18.1554 68.6634C13.4007 68.6634 9.53171 64.8175 9.53171 60.0907C9.53171 55.3639 13.4007 51.5185 18.1554 51.5185V51.5185ZM102.29 82.1318C101.451 86.9366 98.4652 91.1341 94.0989 93.6478C90.0288 95.9911 85.1513 96.6906 79.9872 97.4307C77.2209 97.8272 74.36 98.2375 71.5655 98.9228C64.1762 100.734 57.0189 104.268 50.0974 107.685C36.2463 114.524 24.2839 120.429 13.0048 112.659C4.74266 106.967 5.12423 96.4355 6.0868 90.6643C6.97871 85.3178 9.39035 80.3935 11.7227 75.6314C12.1195 74.8219 12.5129 74.0107 12.9029 73.1979C14.0789 73.6658 15.3131 73.9738 16.572 74.1134C14.198 81.9021 17.9317 90.3704 25.7681 94.3723L26.8403 94.9201L27.9763 94.5179C34.1715 92.325 39.8798 88.8054 44.9433 84.0571C48.2165 80.9879 51.0292 77.592 53.342 73.9634C54.0457 74.0689 54.7563 74.1219 55.4679 74.122C63.2965 74.122 69.6655 67.7914 69.6655 60.0093C69.6655 55.8242 67.8214 52.0607 64.9007 49.4738L73.8232 31.5389L82.8363 49.8156C80.132 52.387 78.4423 56.0044 78.4423 60.0093C78.4423 67.7914 84.8109 74.122 92.6395 74.122C95.5353 74.1246 98.3618 73.2416 100.736 71.5929C102.331 74.8396 102.926 78.4928 102.29 82.1318V82.1318Z" fill="white" />
            </g>
            <defs>
              <clipPath id="clip0">
                <rect width="111" height="122" fill="white" />
              </clipPath>
            </defs>
          </svg>
          <p>Jest</p>
        </a>

        <a href='https://redux.js.org/' target="_blank">
          <svg aria-label="redux logo" name="redux logo" width="123" height="118" viewBox="0 0 123 118" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M85.3359 82.024C89.8599 81.556 93.2919 77.656 93.1359 72.976C92.9799 68.296 89.0799 64.552 84.3999 64.552H84.0879C79.2519 64.708 75.5079 68.764 75.6639 73.6C75.8199 75.94 76.7559 77.968 78.1599 79.372C72.8559 89.824 64.7439 97.468 52.5759 103.864C44.3079 108.232 35.7279 109.792 27.1479 108.7C20.1279 107.764 14.6679 104.644 11.2359 99.496C6.24395 91.852 5.77594 83.584 9.98794 75.316C12.9519 69.388 17.6319 65.02 20.5959 62.836C19.9719 60.808 19.0359 57.376 18.5679 54.88C-4.05206 71.26 -1.71206 93.412 5.15194 103.864C10.2999 111.664 20.7519 116.5 32.2959 116.5C35.4159 116.5 38.5359 116.188 41.6559 115.408C61.6239 111.508 76.7559 99.652 85.3359 82.024V82.024Z" fill="white" />
            <path d="M112.792 62.68C100.936 48.796 83.4639 41.152 63.4959 41.152H60.9999C59.5959 38.344 56.6319 36.472 53.3559 36.472H53.0439C48.2079 36.628 44.4639 40.684 44.6199 45.52C44.7759 50.2 48.6759 53.944 53.3559 53.944H53.6679C57.0999 53.788 60.0639 51.604 61.3119 48.64H64.1199C75.9759 48.64 87.2079 52.072 97.3479 58.78C105.148 63.928 110.764 70.636 113.884 78.748C116.536 85.3 116.38 91.696 113.572 97.156C109.204 105.424 101.872 109.948 92.1999 109.948C85.9599 109.948 80.0319 108.076 76.9119 106.672C75.1959 108.232 72.0759 110.728 69.8919 112.288C76.5999 115.408 83.4639 117.124 90.0159 117.124C104.992 117.124 116.068 108.856 120.28 100.588C124.804 91.54 124.492 75.94 112.792 62.68Z" fill="white" />
            <path d="M33.544 84.676C33.7 89.356 37.6 93.1 42.28 93.1H42.592C47.428 92.944 51.172 88.888 51.016 84.052C50.86 79.372 46.96 75.628 42.28 75.628H41.968C41.656 75.628 41.188 75.628 40.876 75.784C34.48 65.176 31.828 53.632 32.764 41.152C33.388 31.792 36.508 23.68 41.968 16.972C46.492 11.2 55.228 8.39205 61.156 8.23605C77.692 7.92405 84.712 28.516 85.18 36.784C87.208 37.252 90.64 38.344 92.98 39.124C91.108 13.852 75.508 0.748047 60.532 0.748047C46.492 0.748047 33.544 10.888 28.396 25.864C21.22 45.832 25.9 65.02 34.636 80.152C33.856 81.244 33.388 82.96 33.544 84.676V84.676Z" fill="white" />
          </svg>
          <p>Redux</p>
        </a>

        <a href='https://ionicframework.com/' target="_blank">
          <svg aria-label="ionic logo" name="ionic logo" width="113" height="113" viewBox="0 0 113 113" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M56.4894 30.7695C51.3978 30.7695 46.4206 32.2794 42.1871 35.1081C37.9535 37.9368 34.6539 41.9574 32.7055 46.6614C30.757 51.3654 30.2472 56.5416 31.2405 61.5354C32.2338 66.5291 34.6857 71.1162 38.286 74.7165C41.8863 78.3168 46.4733 80.7686 51.4671 81.7619C56.4608 82.7552 61.637 82.2454 66.341 80.297C71.045 78.3485 75.0656 75.0489 77.8943 70.8154C80.7231 66.5819 82.2329 61.6046 82.2329 56.5131C82.2248 49.6879 79.5099 43.1447 74.6838 38.3186C69.8577 33.4925 63.3145 30.7777 56.4894 30.7695V30.7695Z" fill="white" />
            <path d="M93.4526 33.0518C99.9291 33.0518 105.179 27.8015 105.179 21.325C105.179 14.8485 99.9291 9.59827 93.4526 9.59827C86.9761 9.59827 81.7258 14.8485 81.7258 21.325C81.7258 27.8015 86.9761 33.0518 93.4526 33.0518Z" fill="white" />
            <path d="M107.892 33.1133L107.4 32.0374L106.632 32.9288C104.709 35.1103 102.278 36.7838 99.554 37.8009L98.7855 38.0775L99.0929 38.846C103.234 48.8056 103.759 59.9007 100.575 70.2064C97.3906 80.5121 90.6994 89.378 81.6618 95.266C72.6243 101.154 61.8107 103.692 51.0972 102.441C40.3837 101.189 30.4464 96.2266 23.0094 88.4141C15.5723 80.6016 11.1049 70.4321 10.3821 59.67C9.6593 48.9079 12.7268 38.2323 19.0524 29.4955C25.378 20.7587 34.5624 14.5119 45.0124 11.839C55.4623 9.16607 66.5182 10.2357 76.2619 14.8623L76.9842 15.2081L77.2993 14.4396C78.4477 11.7685 80.2373 9.42197 82.5095 7.60796L83.4316 6.83949L82.3788 6.29388C74.3808 2.13696 65.4954 -0.022405 56.4816 0.000175283C44.2777 0.00192774 32.4025 3.95581 22.6333 11.2701C12.8641 18.5844 5.72631 28.8656 2.28814 40.5752C-1.15003 52.2848 -0.703655 64.793 3.56046 76.2277C7.82458 87.6625 15.6771 97.4088 25.9428 104.008C36.2086 110.607 48.3354 113.705 60.5084 112.837C72.6814 111.968 84.2459 107.181 93.4712 99.1919C102.696 91.2026 109.086 80.4404 111.684 68.5163C114.283 56.5921 112.949 44.1472 107.884 33.0441L107.892 33.1133Z" fill="white" />
          </svg>
          <p>Ionic</p>
        </a>

        <a href='https://probot.github.io/' target="_blank">
          <svg aria-label="probot logo" name="probot logo" width="138" height="123" viewBox="0 0 138 123" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M95.1843 92.598L106.251 99.7108L114.223 86.2754L120.084 92.9931L110.598 108.341L105.33 108.736L93.8682 101.556L95.1843 92.598Z" fill="white" />
            <path d="M77.3435 77.6095H61.5342V84.1296H77.3435V77.6095Z" fill="white" />
            <path d="M69.4387 4.01086L73.4661 20.8526H65.3164L69.4387 4.01086Z" fill="white" />
            <path d="M43.8158 92.598L32.7492 99.7108L24.7773 86.2754L18.916 92.9931L28.4016 108.341L33.6701 108.736L45.1319 101.556L43.8158 92.598Z" fill="white" />
            <path d="M14.3036 79.5578C14.3036 79.5578 10.8769 81.664 8.50548 74.0255C5.88903 65.5888 0.339939 71.7099 1.06322 77.8388C1.7865 83.9677 6.79411 85.742 11.2721 84.3669C15.7501 82.9917 14.3036 79.5578 14.3036 79.5578Z" fill="white" />
            <path d="M13.446 65.8574C13.6825 65.1807 14.13 64.5978 14.7227 64.1944C15.3154 63.791 16.0219 63.5886 16.7383 63.6169C19.3746 63.6169 25.7615 66.5806 25.7615 71.9152C25.7615 77.2499 20.8251 78.8345 20.8251 78.8345H16.5447C16.5447 78.8345 19.4417 77.3843 17.3351 73.2351C15.2285 69.0859 13.5132 67.5052 13.45 66.1894" fill="white" />
            <path d="M10.2525 89.0217C9.13403 85.0701 10.964 80.6285 14.8886 78.4472C18.8133 76.2659 23.5838 77.0562 26.3504 80.1108L10.2525 89.0217Z" fill="#43914B" />
            <path d="M89.7261 83.1141H49.1514C45.9492 83.1141 43.3533 85.7095 43.3533 88.9111V116.308C43.3533 119.509 45.9492 122.105 49.1514 122.105H89.7261C92.9283 122.105 95.5242 119.509 95.5242 116.308V88.9111C95.5242 85.7095 92.9283 83.1141 89.7261 83.1141Z" fill="white" />
            <path d="M101.668 20H38.1695C33.6576 20 30 23.6569 30 28.168V71.5013C30 76.0123 33.6576 79.6692 38.1695 79.6692H101.668C106.18 79.6692 109.837 76.0123 109.837 71.5013V28.168C109.837 23.6569 106.18 20 101.668 20Z" fill="white" />
            <path d="M76.2922 65.4783H62.7198C60.7378 65.4783 59.1311 67.0847 59.1311 69.0663V69.0703C59.1311 71.0519 60.7378 72.6583 62.7198 72.6583H76.2922C78.2742 72.6583 79.8809 71.0519 79.8809 69.0703V69.0663C79.8809 67.0847 78.2742 65.4783 76.2922 65.4783Z" fill="#43914B" />
            <path d="M27.2358 77.8387C28.5505 80.3569 28.8205 83.2914 27.9872 86.0071C27.1539 88.7227 25.2844 91.001 22.7833 92.3487C20.2823 93.6964 17.3511 94.005 14.6241 93.2078C11.8972 92.4106 9.594 90.5717 8.21313 88.0892L27.2358 77.8387Z" fill="white" />
            <path d="M32.682 100.272L33.6543 108.736C33.6543 108.736 32.8954 109.527 30.773 109.527C28.6506 109.527 28.4016 108.341 28.4016 108.341L32.682 100.272Z" fill="#43914B" />
            <path d="M19.497 88.1286C20.3832 88.1286 21.1016 87.4103 21.1016 86.5243C21.1016 85.6382 20.3832 84.9199 19.497 84.9199C18.6108 84.9199 17.8923 85.6382 17.8923 86.5243C17.8923 87.4103 18.6108 88.1286 19.497 88.1286Z" fill="#086E12" />
            <path d="M34.6659 75.6733C35.5521 75.6733 36.2706 74.955 36.2706 74.0689C36.2706 73.1829 35.5521 72.4646 34.6659 72.4646C33.7797 72.4646 33.0613 73.1829 33.0613 74.0689C33.0613 74.955 33.7797 75.6733 34.6659 75.6733Z" fill="#086E12" />
            <path d="M103.8 75.6733C104.687 75.6733 105.405 74.955 105.405 74.0689C105.405 73.1829 104.687 72.4646 103.8 72.4646C102.914 72.4646 102.196 73.1829 102.196 74.0689C102.196 74.955 102.914 75.6733 103.8 75.6733Z" fill="#086E12" />
            <path d="M34.6659 27.0684C35.5521 27.0684 36.2706 26.3502 36.2706 25.4641C36.2706 24.578 35.5521 23.8597 34.6659 23.8597C33.7797 23.8597 33.0613 24.578 33.0613 25.4641C33.0613 26.3502 33.7797 27.0684 34.6659 27.0684Z" fill="#086E12" />
            <path d="M103.8 27.0684C104.687 27.0684 105.405 26.3502 105.405 25.4641C105.405 24.578 104.687 23.8597 103.8 23.8597C102.914 23.8597 102.196 24.578 102.196 25.4641C102.196 26.3502 102.914 27.0684 103.8 27.0684Z" fill="#086E12" />
            <path d="M48.0724 89.7331C48.9586 89.7331 49.6771 89.0148 49.6771 88.1288C49.6771 87.2427 48.9586 86.5244 48.0724 86.5244C47.1862 86.5244 46.4678 87.2427 46.4678 88.1288C46.4678 89.0148 47.1862 89.7331 48.0724 89.7331Z" fill="#086E12" />
            <path d="M48.0724 119.421C48.9586 119.421 49.6771 118.703 49.6771 117.817C49.6771 116.931 48.9586 116.213 48.0724 116.213C47.1862 116.213 46.4678 116.931 46.4678 117.817C46.4678 118.703 47.1862 119.421 48.0724 119.421Z" fill="#086E12" />
            <path d="M91.1056 89.7331C91.9919 89.7331 92.7103 89.0148 92.7103 88.1288C92.7103 87.2427 91.9919 86.5244 91.1056 86.5244C90.2194 86.5244 89.501 87.2427 89.501 88.1288C89.501 89.0148 90.2194 89.7331 91.1056 89.7331Z" fill="#086E12" />
            <path d="M91.6047 119.209C92.4909 119.209 93.2093 118.49 93.2093 117.604C93.2093 116.718 92.4909 116 91.6047 116C90.7184 116 90 116.718 90 117.604C90 118.49 90.7184 119.209 91.6047 119.209Z" fill="#086E12" />
            <path d="M84.0803 90H54.9197C52.7549 90 51 91.7203 51 93.8424V111.158C51 113.28 52.7549 115 54.9197 115H84.0803C86.2451 115 88 113.28 88 111.158V93.8424C88 91.7203 86.2451 90 84.0803 90Z" fill="#43914B" />
            <path d="M42.3653 88.3184V100.568L36.2708 92.2344C36.8778 91.124 37.7539 90.1837 38.8187 89.4995C39.8834 88.8154 41.1028 88.4092 42.3653 88.3184Z" fill="white" />
            <path d="M124.692 79.5578C124.692 79.5578 128.119 81.664 130.49 74.0255C133.107 65.5888 138.66 71.7099 137.933 77.8388C137.205 83.9677 132.202 85.742 127.724 84.3669C123.246 82.9917 124.692 79.5578 124.692 79.5578Z" fill="white" />
            <path d="M125.562 65.8574C125.326 65.1807 124.878 64.5978 124.285 64.1944C123.693 63.791 122.986 63.5886 122.27 63.6169C119.634 63.6169 113.247 66.5806 113.247 71.9152C113.247 77.2499 118.187 78.8306 118.187 78.8306H122.467C122.467 78.8306 119.57 77.3803 121.677 73.2311C123.784 69.0819 125.499 67.5013 125.562 66.1854" fill="white" />
            <path d="M128.724 89.0217C129.842 85.0701 128.012 80.6285 124.088 78.4472C120.163 76.2659 115.393 77.0562 112.626 80.1108L128.724 89.0217Z" fill="#43914B" />
            <path d="M111.76 77.8387C110.446 80.3569 110.176 83.2914 111.009 86.0071C111.842 88.7227 113.712 91.001 116.213 92.3487C118.714 93.6964 121.645 94.005 124.372 93.2078C127.099 92.4106 129.402 90.5717 130.783 88.0892L111.76 77.8387Z" fill="white" />
            <path d="M106.298 100.272L105.326 108.736C105.326 108.736 106.085 109.527 108.207 109.527C110.33 109.527 110.579 108.341 110.579 108.341L106.298 100.272Z" fill="#43914B" />
            <path d="M119.503 88.1286C120.389 88.1286 121.108 87.4103 121.108 86.5243C121.108 85.6382 120.389 84.9199 119.503 84.9199C118.617 84.9199 117.898 85.6382 117.898 86.5243C117.898 87.4103 118.617 88.1286 119.503 88.1286Z" fill="#086E12" />
            <path d="M96.6309 88.3184V100.568L102.725 92.2383C102.119 91.1272 101.243 90.1861 100.178 89.5012C99.1134 88.8164 97.8937 88.4096 96.6309 88.3184V88.3184Z" fill="white" />
            <path d="M54.2205 43.0847C55.4331 43.0832 56.6189 43.4412 57.6279 44.1135C58.6369 44.7859 59.4239 45.7423 59.8892 46.8618C60.3545 47.9814 60.4772 49.2138 60.2419 50.4031C60.0066 51.5924 59.4238 52.6852 58.5672 53.5433C57.7106 54.4014 56.6187 54.9862 55.4296 55.2238C54.2405 55.4614 53.0077 55.341 51.8871 54.878C50.7664 54.4149 49.8083 53.63 49.1339 52.6224C48.4595 51.6149 48.0991 50.43 48.0983 49.2176C48.0983 47.5921 48.7441 46.0332 49.8938 44.8838C51.0434 43.7344 52.6026 43.0887 54.2284 43.0887L54.2205 43.0847ZM54.2284 34C51.2177 33.9984 48.2742 34.8896 45.7702 36.5608C43.2662 38.232 41.3141 40.6081 40.1609 43.3886C39.0077 46.1691 38.7051 49.2291 39.2915 52.1816C39.8779 55.134 41.3269 57.8463 43.4552 59.9753C45.5835 62.1043 48.2955 63.5545 51.2482 64.1423C54.2009 64.7301 57.2616 64.4292 60.0433 63.2776C62.8249 62.1261 65.2025 60.1756 66.8753 57.6729C68.5481 55.1702 69.4409 52.2277 69.4409 49.2176C69.4367 45.183 67.8318 41.3147 64.9783 38.4618C62.1249 35.6088 58.2559 34.0042 54.2205 34H54.2284Z" fill="#086E12" />
            <path d="M87.2205 43.0847C88.4331 43.0832 89.6189 43.4412 90.6279 44.1135C91.6369 44.7859 92.4239 45.7423 92.8892 46.8618C93.3545 47.9814 93.4772 49.2138 93.2419 50.4031C93.0066 51.5924 92.4238 52.6852 91.5672 53.5433C90.7106 54.4014 89.6187 54.9862 88.4296 55.2238C87.2405 55.4614 86.0077 55.341 84.8871 54.878C83.7664 54.4149 82.8083 53.63 82.1339 52.6224C81.4595 51.6149 81.0991 50.43 81.0983 49.2176C81.0983 47.5921 81.7441 46.0332 82.8938 44.8838C84.0434 43.7344 85.6026 43.0887 87.2284 43.0887L87.2205 43.0847ZM87.2284 34C84.2177 33.9984 81.2742 34.8896 78.7702 36.5608C76.2662 38.232 74.3141 40.6081 73.1609 43.3886C72.0077 46.1691 71.7051 49.2291 72.2915 52.1816C72.8779 55.134 74.3269 57.8463 76.4552 59.9753C78.5835 62.1043 81.2955 63.5545 84.2482 64.1423C87.2009 64.7301 90.2616 64.4292 93.0433 63.2776C95.8249 62.1261 98.2025 60.1756 99.8753 57.6729C101.548 55.1702 102.441 52.2277 102.441 49.2176C102.437 45.183 100.832 41.3147 97.9783 38.4618C95.1249 35.6088 91.2559 34.0042 87.2205 34H87.2284Z" fill="#086E12" />
            <path d="M69.4387 11.594C72.6409 11.594 75.2368 8.9986 75.2368 5.797C75.2368 2.59541 72.6409 0 69.4387 0C66.2365 0 63.6406 2.59541 63.6406 5.797C63.6406 8.9986 66.2365 11.594 69.4387 11.594Z" fill="white" />
            <path d="M50.9299 103.386H54.7518L59.4867 96.0083L63.7197 103.386L66.5456 98.399L69.4743 103.386H74.7112L77.5055 108.906L82.1455 98.9522L84.426 103.386H87.7539" stroke="#086E12" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M84.3904 90.3259C85.2465 90.3269 86.0672 90.6674 86.6726 91.2726C87.2779 91.8779 87.6184 92.6984 87.6195 93.5543V111.665C87.6184 112.52 87.2779 113.341 86.6726 113.946C86.0672 114.551 85.2465 114.892 84.3904 114.893H54.487C53.6309 114.892 52.8102 114.551 52.2049 113.946C51.5995 113.341 51.259 112.52 51.2579 111.665V93.5543C51.259 92.6984 51.5995 91.8779 52.2049 91.2726C52.8102 90.6674 53.6309 90.3269 54.487 90.3259H84.3944H84.3904ZM84.3944 88.7452H54.487C53.2113 88.7452 51.9879 89.2519 51.0858 90.1538C50.1838 91.0557 49.677 92.2789 49.677 93.5543V111.665C49.677 112.94 50.1838 114.163 51.0858 115.065C51.9879 115.967 53.2113 116.474 54.487 116.474H84.3944C85.6694 116.473 86.8918 115.965 87.793 115.064C88.6942 114.162 89.2004 112.939 89.2004 111.665V93.5543C89.2004 92.2789 88.6937 91.0557 87.7916 90.1538C86.8896 89.2519 85.6661 88.7452 84.3904 88.7452H84.3944Z" fill="#086E12" />
          </svg>
          <p>Probot</p>
        </a>

        <a href='https://deno.land/' target="_blank">
          <svg aria-label="deno logo" name="deno logo" width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M49.7482 0.0277328C49.4959 0.0542953 48.6857 0.147264 47.9553 0.21367C37.5693 1.30273 27.3428 5.69883 19.0021 12.6848C17.4615 13.9598 13.9553 17.466 12.6803 19.0066C5.77402 27.2543 1.73652 36.5113 0.249023 47.4684C-0.0830078 49.8988 -0.0830078 58.1066 0.249023 60.5371C1.73652 71.4941 5.77402 80.7512 12.6803 88.9988C13.9553 90.5395 17.4615 94.0457 19.0021 95.3207C27.2498 102.227 36.5068 106.264 47.4639 107.752C49.8943 108.084 58.1021 108.084 60.5326 107.752C71.4896 106.264 80.7467 102.227 88.9943 95.3207C90.5349 94.0457 94.0412 90.5395 95.3162 88.9988C102.222 80.7512 106.26 71.4941 107.747 60.5371C108.079 58.1066 108.079 49.8988 107.747 47.4684C106.26 36.5113 102.222 27.2543 95.3162 19.0066C94.0412 17.466 90.5349 13.9598 88.9943 12.6848C80.7732 5.80508 71.4232 1.71445 60.6123 0.266795C59.4435 0.10742 57.7435 0.041014 54.5959 0.0144515C52.192 -0.012111 50.0006 0.00117027 49.7482 0.0277328ZM50.4123 5.76523C50.4123 7.31914 50.5185 10.6926 50.6646 13.8934C50.7443 15.4605 50.8373 17.7051 50.8771 18.8738C51.0232 23.0176 51.4615 33.8949 51.5279 34.8645L51.5943 35.834L50.9967 35.7676C50.6646 35.741 50.3592 35.6613 50.306 35.6215C50.2662 35.5684 50.1732 34.652 50.1201 33.5762C49.881 28.848 49.0975 10.5066 49.0178 7.82383L48.9381 4.87539L49.31 4.82226C49.5092 4.7957 49.8412 4.75586 50.0537 4.74258L50.4123 4.7293V5.76523ZM63.1224 5.44648C63.1357 5.45976 63.1756 9.4707 63.2154 14.3582C63.2685 19.259 63.3349 23.6551 63.3748 24.1332C63.4146 24.6246 63.4014 25.0496 63.3349 25.0762C63.2818 25.116 62.9498 25.116 62.6178 25.0762L62.0068 25.023L61.9139 21.1582C61.8607 19.0199 61.7943 16.6559 61.7678 15.8855C61.6615 13.5348 61.5685 5.55273 61.6482 5.35351C61.7014 5.20742 61.8474 5.19414 62.4053 5.28711C62.7904 5.3668 63.1092 5.4332 63.1224 5.44648ZM32.4029 9.8957C32.4826 10.0152 33.1068 17.3332 33.8771 26.909C34.1295 30.1629 34.3818 33.1379 34.4217 33.5098C34.4881 34.1871 34.4748 34.2137 34.0498 34.4793C33.8107 34.6254 33.5717 34.7449 33.5185 34.7449C33.4787 34.7449 33.399 34.3996 33.3592 33.9746C33.1732 32.248 32.456 23.9074 31.9514 17.8777C31.6592 14.3316 31.3935 11.1574 31.3537 10.8121C31.2873 10.2277 31.3006 10.1746 31.6459 9.98867C32.0709 9.76289 32.31 9.72305 32.4029 9.8957ZM68.9662 12.5652C69.3381 12.698 69.3779 12.7645 69.4576 13.5215C69.5904 14.8496 69.5506 21.198 69.4045 21.198C69.0193 21.198 68.2224 20.7465 68.156 20.4941C68.1162 20.3348 68.0764 18.4488 68.0764 16.3105C68.0764 11.9941 68.0232 12.2465 68.9662 12.5652ZM44.4357 13.1895C44.4357 13.548 44.5287 15.527 44.635 17.6121C44.7412 19.6973 44.8607 22.3402 44.9139 23.4824C45.0068 25.7934 45.0334 25.7137 44.1435 25.7668C43.7053 25.7801 43.7053 25.7801 43.6787 25.116C43.6521 24.7441 43.5857 23.5887 43.506 22.5262C43.4396 21.4637 43.2803 19.166 43.174 17.4129C43.0678 15.6598 42.935 13.9199 42.8951 13.548C42.8154 12.884 42.8287 12.8574 43.1873 12.7246C43.3998 12.6449 43.7717 12.5785 44.0107 12.5785C44.4357 12.5652 44.4357 12.5652 44.4357 13.1895ZM81.2779 15.009L81.7295 15.1949L81.8224 16.9746C81.8623 17.9441 81.8889 20.0426 81.8623 21.623L81.8224 24.5184L81.2646 24.2395L80.7068 23.9738L80.667 19.5645C80.6404 17.134 80.6537 15.0754 80.6803 14.9824C80.7334 14.7832 80.7334 14.7832 81.2779 15.009ZM57.0264 16.7488C57.106 16.8285 57.292 23.2699 57.3053 26.5371L57.3185 28.5027L56.6943 28.4098C56.3357 28.3699 56.0435 28.3301 56.0303 28.3168C55.9904 28.2902 55.592 18.4488 55.592 17.4926V16.5098L56.2693 16.5895C56.6545 16.6426 56.9865 16.709 57.0264 16.7488ZM87.6131 17.6918C87.7724 17.8777 87.799 20.7863 87.8388 36.8301C87.8787 55.2512 87.8787 55.7293 87.6396 55.7293C87.4935 55.7293 87.2943 55.6496 87.1748 55.5566C86.9756 55.4105 86.949 53.8035 86.8826 38.0652C86.8295 28.5293 86.7631 19.8699 86.7232 18.8207L86.6435 16.9082L87.0287 17.1871C87.2545 17.3465 87.5068 17.5723 87.6131 17.6918ZM75.6998 20.4145C75.7662 20.4676 75.8326 21.2246 75.8459 22.0879C75.9123 25.023 75.9256 43.0191 75.8592 43.0723C75.8326 43.0988 75.5935 43.0324 75.3279 42.9262L74.8498 42.727V31.4246V20.1355L75.2217 20.2152C75.4209 20.2684 75.6334 20.348 75.6998 20.4145ZM39.0435 21.1582C39.0834 21.5168 39.1498 22.327 39.1896 22.991C39.2295 23.6418 39.3225 25.1293 39.4021 26.2848C39.5615 28.6223 39.535 28.7684 38.7779 28.7684C38.3795 28.7684 38.3264 28.7285 38.2732 28.3301C38.1404 27.5465 37.6756 21.0121 37.742 20.9059C37.8084 20.8129 38.499 20.5738 38.8178 20.5473C38.8975 20.534 39.0037 20.8129 39.0435 21.1582ZM17.0764 24.5449C17.2225 25.9527 17.5146 28.9012 17.7271 31.0926C17.9529 33.284 18.1389 35.1434 18.1389 35.223C18.1389 35.3824 17.1162 35.8871 17.01 35.7809C16.9436 35.7145 15.6154 23.9605 15.6154 23.4293C15.6154 23.1105 16.6381 21.7691 16.7709 21.9152C16.8107 21.9418 16.9436 23.1238 17.0764 24.5449ZM69.1521 25.9395L69.5373 26.1652L69.5506 29.034C69.5639 30.6012 69.5904 32.3543 69.5904 32.9254C69.617 34.1207 69.4709 34.3199 68.7537 34.0676L68.342 33.9215V32.7793C68.342 32.1418 68.3021 30.2957 68.249 28.6621L68.1693 25.7137H68.4748C68.6342 25.7137 68.9396 25.8199 69.1521 25.9395ZM22.9068 31.0926C23.1459 33.6426 23.531 37.9457 23.7834 40.6551L24.235 45.5691L23.717 46.0871L23.2123 46.6051L23.1193 45.5559C23.0662 44.9715 22.8006 42.2621 22.5217 39.5262C22.2428 36.7902 21.8443 32.8191 21.6451 30.7074L21.2732 26.8824L21.7912 26.4043C22.2561 25.966 22.3092 25.9527 22.4021 26.1918C22.4553 26.3246 22.681 28.5293 22.9068 31.0926ZM12.9592 32.6996C13.2514 35.316 14.0217 42.2754 14.6857 48.159C15.3498 54.0426 15.974 59.7137 16.0936 60.7762C16.1998 61.8387 16.3857 63.4457 16.492 64.3621C16.6779 65.916 16.6779 66.0223 16.4654 66.1816C16.1467 66.4207 16.0139 66.3941 16.0139 66.1152C16.0139 65.9957 15.8943 64.9863 15.7482 63.8973C15.5092 62.0777 15.1107 58.9965 14.2209 52.077C14.035 50.6824 13.6764 47.9066 13.424 45.9012C13.1584 43.8957 12.7732 40.9074 12.5607 39.2605C12.3482 37.6137 11.9896 34.798 11.7639 32.9785C11.5248 31.1723 11.3787 29.5652 11.4186 29.3926C11.5115 29.034 12.2951 27.7855 12.3748 27.8652C12.4014 27.9051 12.667 30.0699 12.9592 32.6996ZM8.89512 38.4238C9.09433 40.0176 9.46621 42.9262 9.71855 44.9051C9.9709 46.8707 10.2896 49.3277 10.4357 50.3504L10.6881 52.2098L10.4092 52.4488C10.2498 52.5816 10.0904 52.6348 10.0373 52.5816C9.98418 52.5285 9.87793 51.9973 9.79824 51.4129C9.71855 50.8285 9.22715 47.4152 8.6959 43.8426L7.75293 37.3348L8.0584 36.4316C8.21777 35.9402 8.39043 35.5418 8.43027 35.5418C8.4834 35.5418 8.68262 36.8434 8.89512 38.4238ZM81.8092 36.684C81.9951 36.8699 82.0217 37.6934 82.0217 43.7895V50.6824H81.6498C80.8396 50.6824 80.8529 50.8816 80.7998 43.3379L80.7599 36.4715H81.1849C81.4107 36.4715 81.7029 36.5645 81.8092 36.684ZM52.7365 39.0613C55.7381 39.5129 58.3545 40.3496 60.9443 41.6777C62.6178 42.541 63.4146 43.1387 65.274 44.9184C68.0365 47.5613 69.7365 49.8723 71.3303 53.1395C73.6545 57.8941 74.5576 62.1043 75.6998 73.3934C76.2178 78.4535 76.8951 87.6309 77.0412 91.3895C77.081 92.4785 77.174 94.2715 77.2537 95.3738C77.3998 97.7113 77.5724 97.3926 75.5139 98.3887C72.6584 99.7699 69.9092 100.726 66.2834 101.616C61.8474 102.705 58.9787 103.05 54.5959 103.064L51.4084 103.077L51.435 101.55C51.435 100.713 51.5146 98.7605 51.5943 97.2332C51.9928 89.8355 51.9131 80.4988 51.3951 75.3191C51.1029 72.3441 50.5318 68.7316 50.2131 67.9348C50.1467 67.7621 50.4521 67.616 51.767 67.1645C54.1709 66.3277 56.256 65.2785 56.5748 64.7605C57.1459 63.7777 56.1232 62.3699 54.8217 62.3699C54.5959 62.3699 53.9185 62.609 53.2943 62.8879C50.3193 64.2559 44.356 65.8629 40.9162 66.2215C38.5389 66.4738 34.8467 66.3277 32.2834 65.8629C30.8889 65.6105 28.392 64.6676 26.3068 63.5918C23.9029 62.3434 22.4287 60.6832 21.9904 58.7176C21.7514 57.6551 21.8178 55.5301 22.1232 54.3348C22.4553 53.0199 23.385 51.1074 24.235 49.9918C28.0201 45.0113 35.8295 40.6949 43.8381 39.1809C46.3881 38.7027 50.0006 38.6496 52.7365 39.0613ZM93.7092 39.473C94.1873 39.6723 94.2404 39.7254 94.2404 40.177C94.267 43.8027 94.1873 52.0902 94.1209 52.4355C94.1076 52.5551 93.417 52.5684 93.1248 52.4621C92.9388 52.3957 92.9123 51.6785 92.9123 45.8215C92.9123 41.6246 92.9654 39.2605 93.0451 39.2605C93.1115 39.2605 93.417 39.3535 93.7092 39.473ZM99.5131 46.7645L99.9912 46.9637L99.8982 57.9605C99.792 71.9723 99.7787 72.384 99.274 73.5926C98.4506 75.5715 98.4904 75.9699 98.5701 67.284C98.5967 62.941 98.6631 58.5449 98.6896 57.5223C98.7162 56.4996 98.7428 53.6176 98.756 51.1074C98.756 48.0793 98.7959 46.5652 98.8888 46.5652C98.9685 46.5652 99.2474 46.6582 99.5131 46.7645ZM19.6396 50.0715C19.7193 51.1473 19.6928 51.2535 19.3076 52.1035L18.8826 53.0066L18.7232 51.6785C18.4709 49.5535 18.4709 49.4605 18.9756 49.1418C19.2014 48.9824 19.4404 48.8762 19.4803 48.9027C19.5201 48.9293 19.5998 49.4605 19.6396 50.0715ZM11.4318 58.0801C11.5514 59.1691 12.4811 66.3941 12.9592 69.9402C13.6764 75.4254 13.7295 76.209 13.4107 75.877C13.3709 75.8371 13.0654 73.991 12.7467 71.773C10.6748 57.4559 10.6881 57.5488 10.8607 57.4426C11.2193 57.2035 11.3389 57.3363 11.4318 58.0801ZM20.9943 64.1629C21.074 64.4949 21.4592 68.0941 21.4592 68.5324C21.4592 68.9043 20.9811 69.2496 20.7686 69.0371C20.7021 68.9707 20.5295 67.8418 20.3967 66.5402C20.2506 65.2254 20.1045 63.8574 20.0646 63.4988L19.985 62.8348L20.4498 63.366C20.7154 63.6582 20.9545 64.0168 20.9943 64.1629ZM31.7123 69.1699C31.8584 69.3027 31.9514 69.834 32.0709 71.2684C32.2701 73.8582 32.2967 73.659 31.7521 73.659C31.1943 73.659 31.2076 73.6988 31.0217 71.3613C30.8357 68.984 30.8357 69.0105 31.1943 69.0105C31.367 69.0105 31.5928 69.0902 31.7123 69.1699ZM42.231 69.3691C42.2576 69.502 42.324 70.2988 42.3771 71.1355C42.417 71.9723 42.5365 73.8582 42.6428 75.3191C43.0146 80.6848 43.0279 81.3621 42.8021 81.3621C42.5498 81.3621 42.5232 81.1629 42.231 77.3777C42.1248 75.8105 41.9256 73.3402 41.7928 71.8926C41.6732 70.4449 41.5935 69.2363 41.6334 69.2098C41.7795 69.0504 42.1646 69.1699 42.231 69.3691ZM17.2623 71.9191C17.342 72.0387 17.8467 76.2887 18.4709 82.0926C18.6568 83.8457 18.8428 85.5324 18.8826 85.8512L18.949 86.4223L18.617 86.2098C18.3646 86.0371 18.2717 85.8645 18.2717 85.559C18.2717 84.7223 17.7006 79.2105 17.2623 75.8371C17.01 73.9246 16.8107 72.2379 16.8107 72.0785C16.8107 71.7996 17.1295 71.6934 17.2623 71.9191ZM93.9084 77.4707L93.8154 83.0223L93.4834 83.5137C92.7263 84.6293 92.7662 84.8418 92.806 78.6262L92.8326 72.9285L93.324 72.4238C93.5896 72.1582 93.8553 71.9324 93.9084 71.9324C93.9482 71.9324 93.9482 74.4293 93.9084 77.4707ZM81.6232 86.2762C81.6896 93.9926 81.6764 94.5902 81.4639 94.8293C81.331 94.9754 81.2115 95.0684 81.1717 95.0285C81.0787 94.9223 80.9459 78.0949 81.0521 78.002C81.1053 77.9488 81.2381 77.9223 81.3576 77.9355C81.5303 77.9754 81.5701 78.9184 81.6232 86.2762ZM38.2467 80.9902C38.3396 81.8137 38.6717 85.7582 38.8045 87.6176C38.8842 88.866 38.8842 88.9059 38.592 88.9988C38.4326 89.052 38.2467 89.0387 38.1935 88.9723C38.1006 88.8793 37.8084 85.9309 37.4498 81.3887L37.3568 80.2996H37.7685C38.1537 80.2996 38.1803 80.3262 38.2467 80.9902ZM27.8076 85.6387C27.9006 85.7316 27.967 86.0637 27.967 86.3957C27.967 86.741 28.1264 88.534 28.299 90.3934C28.8037 95.4801 28.8435 96.1707 28.6178 96.0379C28.2725 95.8387 27.967 95.5332 28.0334 95.4535C28.06 95.4004 28.0068 94.7363 27.9006 93.9793C27.8076 93.209 27.6881 91.9605 27.635 91.1902C27.5818 90.4199 27.4623 89.0121 27.356 88.0691C27.1037 85.7449 27.117 85.4793 27.4092 85.4793C27.542 85.4793 27.7146 85.5457 27.8076 85.6387ZM34.0896 94.577C34.1295 94.8691 34.2092 95.9582 34.2623 96.9941C34.3553 98.9863 34.3154 99.1324 33.7709 98.7207C33.6115 98.6012 33.5053 98.0965 33.3459 96.5824C33.067 93.8465 33.0537 93.9527 33.5717 94.0059C33.9568 94.0457 34.01 94.0988 34.0896 94.577Z" fill="white" />
            <path d="M29.3483 45.4231C27.9671 46.0208 27.8608 47.8935 29.1624 48.5575C30.1054 49.0356 31.0616 48.8099 31.553 47.9864C32.4827 46.4724 30.9687 44.7192 29.3483 45.4231Z" fill="white" />
            <path d="M38.353 46.698C37.078 47.4816 37.078 49.3675 38.353 50.1511C39.6147 50.9081 41.2483 49.912 41.2483 48.398C41.2483 46.937 39.5749 45.9542 38.353 46.698Z" fill="white" />
          </svg>
          <p>Deno</p>
        </a>

        <a href='https://github.com/vercel/vercel' target="_blank">
          <svg aria-label="vercel logo" name="vercel logo" width="113" height="100" viewBox="0 0 113 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fillRule="evenodd" clipRule="evenodd" d="M56.5 0L113 100H0L56.5 0Z" fill="url(#paint0_linear)" />
            <defs>
              <linearGradient id="paint0_linear" x1="222.127" y1="228.815" x2="80.0337" y2="32.929" gradientUnits="userSpaceOnUse">
                <stop stopColor="#43914B" />
                <stop offset="1" stopColor="white" />
              </linearGradient>
            </defs>
          </svg>

          <p>Vercel</p>
        </a>

        <a href='https://yarnpkg.com/' target="_blank">
          <svg aria-label="yarn logo" name="yarn logo" width="103" height="109" viewBox="0 0 103 109" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M102.923 79.6215C102.341 75.0771 98.4611 71.9408 93.4817 72.0048C86.0448 72.1008 79.8043 75.9091 75.6655 78.4374C74.0488 79.4294 72.6585 80.1655 71.4621 80.7096C71.7208 76.9972 71.4944 72.1328 69.5544 66.7884C67.194 60.3878 64.0252 56.4515 61.7619 54.1793C64.3809 50.4029 67.97 44.8985 69.6514 36.3857C71.1064 29.1211 70.6537 17.8241 67.3233 11.4876C66.6443 10.2075 65.5126 9.27939 64.0899 8.89535C63.5079 8.73534 62.4085 8.41531 60.2421 9.02337C57.0734 2.33479 55.9417 1.63073 55.0687 1.08668C53.258 -0.0654194 51.1239 -0.321442 49.1192 0.414622C46.4355 1.3747 44.1397 3.93493 41.9734 8.47932C41.65 9.15138 41.359 9.79143 41.1003 10.4315C36.9939 10.7195 30.5271 12.1916 25.0626 18.0481C24.3836 18.7842 23.0579 19.3283 21.6675 19.8403H21.6999C18.8545 20.8004 17.5288 23.1046 15.9767 27.2649C13.778 33.0894 16.0414 38.8179 18.2724 42.5303C15.233 45.2185 11.1913 49.5069 9.05721 54.5313C6.40581 60.7398 6.1148 66.8204 6.2118 70.1166C3.94841 72.4848 0.456326 76.9332 0.0683168 81.9257C-0.449029 88.9023 2.10537 93.6387 3.23706 95.3668C3.5604 95.8789 3.91608 96.2949 4.30409 96.7109C4.17475 97.575 4.14242 98.5031 4.33642 99.4632C4.75677 101.703 6.17947 103.528 8.34586 104.68C12.614 106.92 18.5634 107.88 23.1549 105.608C24.8039 107.336 27.811 109 33.2755 109H33.5988C34.9892 109 52.6436 108.072 57.7848 106.824C60.0805 106.28 61.6649 105.32 62.6995 104.456C65.9976 103.432 75.1159 100.359 83.7167 94.8548C89.7956 90.9504 91.8973 90.1184 96.4241 89.0303C100.724 87.9742 103.505 84.0378 102.923 79.6215ZM95.26 84.3259C90.0866 85.542 87.4675 86.6621 81.0653 90.7904C71.0418 97.191 60.1128 100.167 60.1128 100.167C60.1128 100.167 59.2075 101.511 56.5884 102.119C52.0616 103.208 35.0215 104.136 33.4695 104.168C29.2984 104.2 26.744 103.111 26.0326 101.415C23.8662 96.2949 29.1367 94.0547 29.1367 94.0547C29.1367 94.0547 27.9727 93.3507 27.2937 92.7106C26.6793 92.1025 26.0326 90.8864 25.8386 91.3345C25.0303 93.2866 24.6099 98.0551 22.4435 100.199C19.4688 103.176 13.8427 102.183 10.5122 100.455C6.85849 98.5351 10.7709 94.0227 10.7709 94.0227C10.7709 94.0227 8.79853 95.1748 7.21416 92.8066C5.79146 90.6304 4.46576 86.9181 4.82144 82.3417C5.20944 77.1252 11.0943 72.0688 11.0943 72.0688C11.0943 72.0688 10.0596 64.3561 13.4547 56.4515C16.5264 49.2508 24.8039 43.4583 24.8039 43.4583C24.8039 43.4583 17.8521 35.8417 20.4388 28.9931C22.1202 24.5127 22.7992 24.5447 23.3489 24.3527C25.2889 23.6166 27.1643 22.8166 28.5547 21.3124C35.5065 13.8878 44.3661 15.2959 44.3661 15.2959C44.3661 15.2959 48.5695 2.65482 52.4496 5.11903C53.646 5.88709 57.9464 15.3599 57.9464 15.3599C57.9464 15.3599 62.5379 12.7037 63.0552 13.6958C65.836 19.0402 66.1593 29.2491 64.9306 35.4577C62.8612 45.6985 57.6878 51.203 55.6184 54.6593C55.1334 55.4594 61.1798 57.9876 64.9953 68.4525C68.5197 78.0213 65.3833 86.054 65.933 86.9501C66.03 87.1101 66.0623 87.1741 66.0623 87.1741C66.0623 87.1741 70.1041 87.4941 78.2199 82.5337C82.5527 79.8775 87.6938 76.9012 93.5463 76.8372C99.2048 76.7412 99.4958 83.3338 95.26 84.3259Z" fill="white" />
          </svg>
          <p>Yarn</p>
        </a>

        <a href='https://github.com/desktop/desktop/' target="_blank">
          <svg aria-label="gitHub desktop logo" name="gitHub desktop logo" width="98" height="96" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fillRule="evenodd" clipRule="evenodd" d="M49 0C21.9275 0 0 21.9275 0 49C0 70.6825 14.0262 88.9963 33.5037 95.4888C35.9537 95.9175 36.8725 94.4475 36.8725 93.1613C36.8725 91.9975 36.8113 88.1388 36.8113 84.035C24.5 86.3013 21.315 81.0337 20.335 78.2775C19.7837 76.8687 17.395 72.52 15.3125 71.3562C13.5975 70.4375 11.1475 68.1712 15.2513 68.11C19.11 68.0487 21.8663 71.6625 22.785 73.1325C27.195 80.5437 34.2388 78.4613 37.0563 77.175C37.485 73.99 38.7712 71.8462 40.18 70.6212C29.2775 69.3962 17.885 65.17 17.885 46.4275C17.885 41.0987 19.7838 36.6887 22.9075 33.2587C22.4175 32.0337 20.7025 27.0112 23.3975 20.2737C23.3975 20.2737 27.5013 18.9875 36.8725 25.2963C40.7925 24.1938 44.9575 23.6425 49.1225 23.6425C53.2875 23.6425 57.4525 24.1938 61.3725 25.2963C70.7438 18.9263 74.8475 20.2737 74.8475 20.2737C77.5425 27.0112 75.8275 32.0337 75.3375 33.2587C78.4613 36.6887 80.36 41.0375 80.36 46.4275C80.36 65.2312 68.9063 69.3962 58.0038 70.6212C59.78 72.1525 61.3113 75.0925 61.3113 79.6863C61.3113 86.24 61.25 91.5075 61.25 93.1613C61.25 94.4475 62.1688 95.9788 64.6188 95.4888C83.9738 88.9963 98 70.6212 98 49C98 21.9275 76.0725 0 49 0Z" fill="white" />
          </svg>

          <p>GitHub<br />Desktop</p>
        </a>

      </div>
    </div>
  </ReverseRow >
)

export const MigrationStories = () => {
  const i = createInternational<typeof indexCopy>(useIntl())

  // Controls which story we should show
  const [index, setIndex] = useState(0);

  const hasWindow = (typeof window !== `undefined`)
  const shouldShowOSS = hasWindow && window.innerWidth > 800

  // slack airbnb google oss
  const bgColors = shouldShowOSS ? ["#faf9f8", "#faf9f8", "#faf9f8", "#086E12"] : ["#faf9f8", "#faf9f8", "#faf9f8"]

  const loadIndex = (index: number) => {
    setIndex(index)

    const container = document.querySelector("#index-2 .migrations")! as HTMLAnchorElement
    container.style.backgroundColor = bgColors[index]

    const isOSS = shouldShowOSS && index === 3
    const notOSSTitle = i("index_2_migration_title")
    const ossTitle = i("index_2_migration_oss")
    const title = isOSS ? ossTitle : notOSSTitle

    if (isOSS) {
      container.classList.add("github")
    } else {
      container.classList.remove("github")
    }

    document.querySelectorAll(".github-bar").forEach((b) => {
      const visibleOpacity =
        window.innerWidth > 1000 ? 0.6 :
          window.innerWidth > 800 ? 0.3 : 0.1

      // @ts-ignore
      b.style.opacity = isOSS ? visibleOpacity : 0
    })

    const titleHeading = document.getElementById("migration_title")! as HTMLHeadingElement
    titleHeading.textContent = title
  }

  const prev = (e) => {
    if (index - 1 === -1) loadIndex(bgColors.length - 1)
    else loadIndex(index - 1)

    e.preventDefault()
    return false
  }

  const next = (e) => {
    if (index + 1 === bgColors.length) loadIndex(0)
    else loadIndex(index + 1)

    e.preventDefault()
    return false
  }


  return (
    <div id="m-stories">
      <div className="slides">
        {{
          0: (
            <Slack />
          ),
          1: (
            <AirBnB />
          ),
          2: (
            <Google />
          ),
          3: (
            <OSS />
          )
        }[index]}
      </div>

      <div className="controls">
        <a role="button" href="#m-stories" className="button left" onClick={prev} aria-label="prev">
          <svg width="11" height="15" viewBox="0 0 11 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 0.5L10.5 14.5L5.68248e-07 8L10.5 0.5Z" fill="#08446E" /></svg>
        </a>
        <a role="button" href="#m-stories" className="button right" onClick={next} aria-label="next">
          <svg width="11" height="15" viewBox="0 0 11 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 14.5V0.5L10.5 7L0 14.5Z" fill="#08446E" /></svg>
        </a>
      </div>
    </div >
  )
}


export const GitHubBar = ({ left }) =>
  <svg width="438" height="49" viewBox="0 0 438 49" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="221" width="10" height="10" fill="white" />
    <rect x="117" width="10" height="10" fill="white" />
    <rect x="13" width="10" height="10" fill="white" />
    <rect x="325" width="10" height="10" fill="white" />
    <rect x="247" width="10" height="10" fill="white" />
    <rect x="143" width="10" height="10" fill="white" />
    <rect x="39" width="10" height="10" fill="white" />
    <rect x="351" width="10" height="10" fill="white" />
    <rect x="273" width="10" height="10" fill="white" />
    <rect x="169" width="10" height="10" fill="white" />
    <rect x="65" width="10" height="10" fill="white" />
    <rect opacity="0.9" x="377" width="10" height="10" fill="white" />
    <rect x="299" width="10" height="10" fill="white" />
    <rect x="195" width="10" height="10" fill="white" />
    <rect x="91" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="403" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="221" y="13" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="117" y="13" width="10" height="10" fill="white" fillOpacity="0.4" />
    <rect opacity="0.8" x="13" y="13" width="10" height="10" fill="white" />
    <rect x="325" y="13" width="10" height="10" fill="white" />
    <rect opacity="0.9" x="247" y="13" width="10" height="10" fill="white" />
    <rect opacity="0.9" x="143" y="13" width="10" height="10" fill="white" />
    <rect opacity="0.9" x="39" y="13" width="10" height="10" fill="white" fillOpacity="0.4" />
    <rect opacity="0.8" x="351" y="13" width="10" height="10" fill="white" />
    <rect x="273" y="13" width="10" height="10" fill="white" />
    <rect x="169" y="13" width="10" height="10" fill="white" />
    <rect x="65" y="13" width="10" height="10" fill="white" />
    <rect x="377" y="13" width="10" height="10" fill="white" />
    <rect x="299" y="13" width="10" height="10" fill="white" />
    <rect x="195" y="13" width="10" height="10" fill="white" />
    <rect x="91" y="13" width="10" height="10" fill="white" />
    <rect x="403" y="13" width="10" height="10" fill="white" />
    <rect x="221" y="26" width="10" height="10" fill="white" />
    <rect x="117" y="26" width="10" height="10" fill="white" />
    <rect x="13" y="26" width="10" height="10" fill="white" />
    <rect x="325" y="26" width="10" height="10" fill="white" />
    <rect x="247" y="26" width="10" height="10" fill="white" />
    <rect x="143" y="26" width="10" height="10" fill="white" />
    <rect x="39" y="26" width="10" height="10" fill="white" />
    <rect x="351" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="273" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="169" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="65" y="26" width="10" height="10" fill="white" />
    <rect x="377" y="26" width="10" height="10" fill="white" />
    <rect x="299" y="26" width="10" height="10" fill="white" />
    <rect x="195" y="26" width="10" height="10" fill="white" />
    <rect x="91" y="26" width="10" height="10" fill="white" fillOpacity="0.4" />
    <rect x="403" y="26" width="10" height="10" fill="white" />
    <rect x="221" y="39" width="10" height="10" fill="white" />
    <rect x="117" y="39" width="10" height="10" fill="white" />
    <rect x="13" y="39" width="10" height="10" fill="white" />
    <rect x="325" y="39" width="10" height="10" fill="white" />
    <rect x="247" y="39" width="10" height="10" fill="white" />
    <rect x="143" y="39" width="10" height="10" fill="white" />
    <rect x="39" y="39" width="10" height="10" fill="white" />
    <rect opacity="0.9" x="351" y="39" width="10" height="10" fill="white" />
    <rect x="273" y="39" width="10" height="10" fill="white" />
    <rect x="169" y="39" width="10" height="10" fill="white" />
    <rect x="65" y="39" width="10" height="10" fill="white" />
    <rect x="377" y="39" width="10" height="10" fill="white" />
    <rect x="299" y="39" width="10" height="10" fill="white" />
    <rect x="195" y="39" width="10" height="10" fill="white" />
    <rect x="91" y="39" width="10" height="10" fill="white" />
    <rect x="403" y="39" width="10" height="10" fill="white" />
    <rect opacity="0.5" x="234" y="39" width="10" height="10" fill="white" />
    <rect opacity="0.5" x="130" y="39" width="10" height="10" fill="white" />
    <rect opacity="0.5" x="26" y="39" width="10" height="10" fill="white" fillOpacity="0.4" />
    <rect opacity="0.5" x="338" y="39" width="10" height="10" fill="white" />
    <rect x="260" y="39" width="10" height="10" fill="white" />
    <rect x="156" y="39" width="10" height="10" fill="white" fillOpacity="0.4" />
    <rect x="52" y="39" width="10" height="10" fill="white" />
    <rect x="208" y="39" width="10" height="10" fill="white" />
    <rect opacity="0.3" x="104" y="39" width="10" height="10" fill="white" />
    {left && <rect y="39" width="10" height="10" fill="white" fillOpacity="0.99" />}
    <rect x="364" y="39" width="10" height="10" fill="white" />
    <rect x="286" y="39" width="10" height="10" fill="white" />
    <rect x="182" y="39" width="10" height="10" fill="white" />
    <rect x="78" y="39" width="10" height="10" fill="white" />
    <rect opacity="0.6" x="390" y="39" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="312" y="39" width="10" height="10" fill="white" />
    <rect x="416" y="39" width="10" height="10" fill="white" />
    <rect x="234" y="26" width="10" height="10" fill="white" />
    <rect x="130" y="26" width="10" height="10" fill="white" />
    <rect x="26" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.6" x="338" y="26" width="10" height="10" fill="white" />
    <rect x="260" y="26" width="10" height="10" fill="white" />
    <rect x="156" y="26" width="10" height="10" fill="white" />
    <rect x="52" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.9" x="208" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.9" x="104" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.9" y="26" width="10" height="10" fill="white" />
    <rect x="364" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.3" x="286" y="26" width="10" height="10" fill="white" />
    <rect x="182" y="26" width="10" height="10" fill="white" />
    <rect x="78" y="26" width="10" height="10" fill="white" />
    <rect x="390" y="26" width="10" height="10" fill="white" />
    <rect x="312" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="416" y="26" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="428" y="26" width="10" height="10" fill="white" />
    <rect x="234" y="13" width="10" height="10" fill="white" />
    <rect x="130" y="13" width="10" height="10" fill="white" />
    <rect x="26" y="13" width="10" height="10" fill="white" />
    <rect x="338" y="13" width="10" height="10" fill="white" />
    <rect x="260" y="13" width="10" height="10" fill="white" />
    <rect x="156" y="13" width="10" height="10" fill="white" />
    <rect x="52" y="13" width="10" height="10" fill="white" fillOpacity="0.4" />
    <rect x="208" y="13" width="10" height="10" fill="white" />
    <rect x="104" y="13" width="10" height="10" fill="white" />
    <rect y="13" width="10" height="10" fill="white" />
    <rect x="364" y="13" width="10" height="10" fill="white" />
    <rect x="286" y="13" width="10" height="10" fill="white" />
    <rect x="182" y="13" width="10" height="10" fill="white" />
    <rect x="78" y="13" width="10" height="10" fill="white" />
    <rect opacity="0.5" x="390" y="13" width="10" height="10" fill="white" />
    <rect opacity="0.9" x="312" y="13" width="10" height="10" fill="white" />
    <rect x="416" y="13" width="10" height="10" fill="white" />
    <rect opacity="0.3" x="428" y="13" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="234" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="130" width="10" height="10" fill="white" />
    <rect opacity="0.8" x="26" width="10" height="10" fill="white" />
    <rect x="338" width="10" height="10" fill="white" />
    <rect x="260" width="10" height="10" fill="white" />
    <rect x="156" width="10" height="10" fill="white" />
    <rect x="52" width="10" height="10" fill="white" />
    <rect x="208" width="10" height="10" fill="white" />
    <rect x="104" width="10" height="10" fill="white" />
    {left && <rect width="10" height="10" fill="white" fillOpacity="0.99" />}
    <rect opacity="0.5" x="364" width="10" height="10" fill="white" />
    <rect opacity="0.6" x="286" width="10" height="10" fill="white" />
    <rect opacity="0.6" x="182" width="10" height="10" fill="white" fillOpacity="0.4" />
    <rect opacity="0.6" x="78" width="10" height="10" fill="white" />
    <rect x="390" width="10" height="10" fill="white" />
    <rect opacity="0.5" x="312" width="10" height="10" fill="white" />
    <rect x="416" width="10" height="10" fill="white" />
    {!left && <rect x="428" width="10" height="10" fill="white" fillOpacity="0.99" />}
    {!left && <rect x="428" y="39" width="10" height="10" fill="white" fillOpacity="0.99" />}
  </svg>



